<template>
	<view class="detail">
		<nav-bar :title="'日常' + _typeName" leftArrow />

		<view class="universal-head">
			<view class="universal-head-title">工程：{{ detail.projectName }}</view>
			<view class="universal-status"
				:class="detail.state?.value === '3' ? 'universal-status-success' : 'universal-status-warning'">
				{{ detail.state?.label }}
			</view>
		</view>

		<view class="universal-detail">
			<view class="universal-detail-top">
				<view class="universal-detail-top-time">
					<text class="universal-detail-top-title">发起{{ _typeName }}</text>
					{{ detail.createTime }}
				</view>
				<view class="universal-detail-top-username">发起人：{{ detail.createByName }}</view>
			</view>

			<view class="universal-detail-cont">
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">工程名称：</view>
					<view class="universal-detail-item-cont">{{ detail.projectName }}</view>
					<!-- <van-text-ellipsis class="universal-detail-item-cont" :content="detail.projectName" /> -->
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">{{ _typeName }}原因：</view>
					<view class="universal-detail-item-cont">{{ detail.repairReason }}</view>
					<!-- <van-text-ellipsis class="universal-detail-item-cont" :content="detail.repairReason" /> -->
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">关联设备：</view>
					<view class="universal-detail-item-cont">
						{{ detail.relatedEquipment?.map((it) => it.name).join('、') }}
					</view>
					<!-- <van-text-ellipsis v-for="name in detail.adName" class="universal-detail-item-cont"
						:content="name" /> -->
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">{{ _typeName }}前照片：</view>
					<view class="universal-detail-list">
						<image v-for="(image, index) in detail.imagesUrl" :src="image.url" mode="aspectFit"
							@click="handleImagePreview(image.url, index)" class="universal-detail-list-image"></image>
					</view>
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">{{ _typeName }}前视频：</view>
					<view class="universal-detail-list">
						<video-preview v-for="(image, index) in detail.videosUrl" :src="image.url" />
						<view v-if="!detail.videosUrl?.length">-</view>
					</view>
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">计划完成时间：</view>
					<van-text-ellipsis class="universal-detail-item-cont" :content="detail.planFinishTime" />
				</view>
				<view class="universal-detail-item">
					<view class="universal-detail-item-title">指派处理人：</view>
					<van-text-ellipsis class="universal-detail-item-cont" :content="detail.assignedHandlerName" />
				</view>
			</view>
		</view>

		<FormHandle v-model="detail" v-if="_isCanOpt && detail.state?.value === '1'" @confirm="getDetail" />
		<DetailHandle v-model="detail" v-if="detail.state?.value !== '1'" />

		<FormCheck v-model="detail" v-if="_isCanOpt && detail.state?.value === '2'" @confirm="getDetail" />
		<DetailCheck v-model="detail" v-if="detail.state?.value === '3'" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	import dayjs from 'dayjs';

	import {
		showImagePreview
	} from 'vant';

	import FormHandle from './components/FormHandle';
	import FormCheck from './components/FormCheck';

	import DetailHandle from './components/DetailHandle';
	import DetailCheck from './components/DetailCheck';

	import {
		apiDailyRepairDetail
	} from '@/api/dailyFix';

	import {
		splitFilesToImageVideo
	} from '@/utils/index';

	import store from '@/store'

	const path = defineProps({
		type: String, // 1维修 2养护
		id: String,
		state: String,
	});

	const userInfo = store.getters.GET_USER_INFO.sysUser;
	const currentUserId = ref(Number(userInfo.userId) || '');
	const detail = ref({});

	const _isCanOpt = computed(() => {
		const todoUsers = detail.value?.todoUsers || [];
		return !!todoUsers.find(it => it == currentUserId.value);
	})

	const _typeName = computed(() => {
		const typeMap = {
			'1': '维修',
			'2': '养护',
		};
		window.document.title = '日常' + (typeMap[path.type] || '');
		return typeMap[detail.value.type?.value || path.type] || '';
	});

	const handleImagePreview = (imageUrl, index) => {
		showImagePreview({
			images: [imageUrl],
			startPosition: index,
			closeOnClickImage: false,
		})
	}

	const getDetail = () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});

		apiDailyRepairDetail({
			value: path.id
		}).then(res => {
			const urls = splitFilesToImageVideo(res.convertFileUrl)
			const urls2 = splitFilesToImageVideo(res.convertFinishPic)
			const {
				state
			} = res;
			detail.value = {
				...res,
				imagesUrl: urls.images || [],
				videosUrl: urls.videos || [],
				imagesUrl2: urls2.images || [],
				videosUrl2: urls2.videos || [],
			}
		}).finally(() => {
			uni.hideLoading();
		});
	};

	getDetail();
</script>

<style lang="scss" scoped>
	@import '@/assets/universal-page.scss';
	@import '@/assets/universal-detail.scss';

	.detail {
		padding-bottom: 20rpx;

		.universal-detail {
			.universal-detail-item {
				width: 100%;
			}
		}
	}
</style>